<template>
	<view>
		<view v-if='dataList.length!==0'>
			<view class='header'>
				<view>富阳区行政事业单位资产清查盘损 ( 亏 ) 申请处置审批表</view>
			</view>
			<view class='container'>
				<view style='display: flex;font-size: 10px;'>
					<view style='flex:3'>填报单位: {{dataList[0].enterpriseName}}</view>
					<view style='flex:1;text-align: right;'>金额:元 共1页</view>
				</view>
				<view class='tableWrap'>
					<!--  -->
					<vxe-table :height="initHeight" :data="dataList" border resizable show-overflow style="width: 100%"
					 show-footer-overflow show-footer :footer-method="footerMethod" :header-cell-style="{
				          'font-size':'13px',
				          'font-weight':'400',
				          'background-color': 'rgb(64, 158, 255)',
				          'color':'#fff',
				          'text-align':'center',
						  'line-height':'14px'
				        }"
					 :cell-style="{
				          'text-align':'center',
						  'font-size':'12px',
						  'line-height':'14px'
				        }">
						<vxe-table-column title="序号" type="seq" width="50" />
						<vxe-table-column title="单位" width="150" field="enterpriseName" />
						<vxe-table-column title="原因" width="150" field="reason" />
						<vxe-table-column field="amount" title="数量" width="120" />
						<vxe-table-column field="value" title="原值" width="120" />
						<vxe-table-column title="房屋">
							<vxe-table-column field="houseAmount" title="数量" width="120" />
							<vxe-table-column field="houseValue" title="原值" width="120" />
						</vxe-table-column>
						<vxe-table-column title="车辆">
							<vxe-table-column field="carAmount" title="数量" width="120" />
							<vxe-table-column field="carValue" title="原值" width="120" />
						</vxe-table-column>
						<vxe-table-column title="电脑">
							<vxe-table-column field="computerAmount" title="数量" width="120" />
							<vxe-table-column field="computerValue" title="原值" width="120" />
						</vxe-table-column>
						<vxe-table-column title="空调">
							<vxe-table-column field="airAmount" title="数量" width="120" />
							<vxe-table-column field="airValue" title="原值" width="120" />
						</vxe-table-column>
						<vxe-table-column title="照相（摄像）机">
							<vxe-table-column field="cameraAmount" title="数量" width="120" />
							<vxe-table-column field="cameraValue" title="原值" width="120" />
						</vxe-table-column>
						<vxe-table-column title="复印机（打印、扫描设备）">
							<vxe-table-column field="printAmount" title="数量" width="120" />
							<vxe-table-column field="printValue" title="原值" width="120" />
						</vxe-table-column>
						<vxe-table-column title="电视机">
							<vxe-table-column field="tvAmount" title="数量" width="120" />
							<vxe-table-column field="tvValue" title="原值" width="120" />
						</vxe-table-column>
						<vxe-table-column title="投影仪">
							<vxe-table-column field="projectorAmount" title="数量" width="120" />
							<vxe-table-column field="projectorValue" title="原值" width="120" />
						</vxe-table-column>
						<vxe-table-column title="冰箱">
							<vxe-table-column field="frigAmount" title="数量" width="120" />
							<vxe-table-column field="frigValue" title="原值" width="120" />
						</vxe-table-column>
						<vxe-table-column title="办公家具">
							<vxe-table-column field="officeAmount" title="数量" width="120" />
							<vxe-table-column field="officeValue" title="原值" width="120" />
						</vxe-table-column>
						<vxe-table-column title="课桌椅">
							<vxe-table-column field="deskAmount" title="数量" width="120" />
							<vxe-table-column field="deskValue" title="原值" width="120" />
						</vxe-table-column>
						<vxe-table-column title="医疗器械">
							<vxe-table-column field="medicalAmount" title="数量" width="120" />
							<vxe-table-column field="medicalValue" title="原值" width="120" />
						</vxe-table-column>
						<vxe-table-column title="其他">
							<vxe-table-column field="otherAmount" title="数量" width="120" />
							<vxe-table-column field="otherValue" title="原值" width="120" />
						</vxe-table-column>
						<vxe-table-column title="备注" width="220" field="remark" />
					</vxe-table>
				</view>

			</view>
		</view>
		<view v-else style='text-align: center;'>
			<image mode='aspectFit' style='height: 500px;width: 300px;' src='../../../../../static/img/loading.png' />
		</view>
	</view>
</template>

<script>
	import XEUtils from 'xe-utils'
	export default {
		props: {
			dataList: {
				type: Array,
				default: {}
			}
		},
		data() {
			return {
				loading: false,
				tableData: [],
				initHeight: ''
			}
		},

		created() {
			this.initHeight = document.body.clientHeight - 180
		},
		methods: {
			footerMethod({
				columns,
				data
			}) {
				const footerData = [
					columns.map((column, columnIndex) => {
						if (columnIndex == 0) {
							return '合计'
						} else if (column.property == 'enterpriseName' || column.property == 'reason' || column.property == 'remark') {
							return '--'
						} else {
							return XEUtils.sum(data, column.property)
						}
					})
				]
				this.sumList = footerData[0]
				return footerData
			}
		}

	}
</script>

<style scoped lang='scss'>
	.tableWrap /deep/ .vxe-table .vxe-cell {
		white-space: pre-line;
		word-break: break-all;
		padding-left: 0px !important;
		padding-right: 0px !important;
	}

	.tableWrap /deep/ .vxe-table .vxe-header--column:not(.col--ellipsis) {
		padding: 5px 0;
		overflow-x: auto;
	}

	.header {
		text-align: center;
		text-align: center;
		font-size: 16px;
		margin-top: 5px;
	}

	.dateTitle {
		margin-top: 8px;
		font-size: 13px;
		color: gray;
	}

	.container {
		margin-top: 5px;
		padding: 5px 10px;
		background: #fff;
		margin: 8px 0px;
	}

	.tableWrap {
		margin-top: 10px;
	}
</style>
